<template>
	<view>
		<uni-popup ref="popup" type="bottom">
			<view class="response bg-white flex flex-direction" style="height: 600upx;">
				<view class="flex justify-between">
					<view class="text-lg text-black padding" @click="hide">取消</view>
					<view class="text-lg text-gray padding">请选择</view>
					<view class="text-lg text-black padding" @click="_onSubmit">确定</view>
				</view>
				<view v-if="isShowTab == true" class="flex response" style="background-color: #f5f5f5; height: 120upx;">
					<view style="width: 48%; margin: 8upx" class="flex flex-direction align-center justify-center" :class="tabCur == 0? 'bg-white text-blue': ''" @click="onClickTab(0)">
						<view class="text-lg">
							开始时间
						</view>
						<view  class="text-df">
							{{startTime}}
						</view>
					</view>
					<view style="width: 48%; margin: 8upx" class="flex flex-direction align-center justify-center" :class="tabCur == 1? 'bg-white text-blue': ''" @click="onClickTab(1)">
						<view class="text-lg">
							结束时间
						</view>
						<view  class="text-df">
							{{endTime}}
						</view>
					</view>
				</view>
				<picker-view class="response" v-if="isShow" style="height: 400upx;" :value="value" @change="_onChange">
					<picker-view-column v-if="dateType <= 4">
						<view class="text-center padding-sm" v-for="item in years" :key="item">{{ item }}年</view>
					</picker-view-column>
					<picker-view-column v-if="dateType <= 3">
						<view class="text-center padding-sm" v-for="item in months" :key="item">{{ item | formatNum }}月</view>
					</picker-view-column>
					<picker-view-column v-if="dateType <= 2">
						<view class="text-center padding-sm" v-for="item in days" :key="item">{{ item | formatNum }}日</view>
					</picker-view-column>
					<picker-view-column v-if="dateType <= 1">
						<view class="text-center padding-sm" v-for="item in hours" :key="item">{{ item | formatNum }}时</view>
					</picker-view-column>
					<picker-view-column v-if="dateType <= 0">
						<view class="text-center padding-sm" v-for="item in minutes" :key="item">{{ item | formatNum }}分</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
const formatNum = num => {
	return num < 10 ? '0' + num : num + '';
};

export default {
	name: 'simple-datetime-picker',
	props: {
		// 4: 到年，3：到月，2：到日，1：时，0：分, 5:时+分
		dateType: {
			type: Number,
			default: 0,
		},
		startYear: {
			type: Number,
			default: 2000
		},
		endYear: {
			type: Number,
			default: 2030
		},
		color: {
			type: String,
			default: ''
		},
		isShowTab: {
			type: Boolean,
			default: false
		},
		// 区间选择时选择错误提示
		timeErrorTip: {
			type: String,
			default: '时间选择错误'
		},
		// 区间选择时最小间隔时间,单位：秒
		delayTime: {
			type: Number,
			default: 0
		},
		// 是否能大于当前时间
		isCanBetterThenNow: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			tabCur: 0,
			startTime: "",
			endTime: "",
			
			years: [],
			months: [],
			days: [],
			hours: [],
			minutes: [],
			isShow: false,
			
			currentDate: new Date(),
			nowDate: [[
				'','','','',''
			],[
				'','','','',''
			]],
			year: '',
			month: '',
			day: '',
			hour: '',
			minute: '',

			value: [0, 0, 0, 0, 0]
		};
	},

	mounted() {
		this.init();
	},

	watch: {
		// month() {
		// 	this.initDays();
		// }
	},

	filters: {
		formatNum(num) {
			return formatNum(num);
		}
	},

	methods: {
		onClickTab: function(e){
			if(this.tabCur == e){
				return;
			};
			this.tabCur = e;
		},
		init() {
			this.initYears();
			this.initMonths();
			this.initDays();
			this.initHours();
			this.initMinutes();
			this.setSelectValue(0);
			this.setSelectValue(1);
			this.changeTime();
		},
		initYears() {
			let years = [];
			for (let i = this.startYear; i <= this.endYear; i++) {
				years.push(i);
			}
			this.years = years;
		},

		initMonths() {
			let months = [];
			for (let i = 1; i <= 12; i++) {
				months.push(i);
			}
			this.months = months;
		},

		initDays() {
			let selectedYear = this.years[this.value[0]];
			let selectedMonth = this.months[this.value[1]];
			let days = [];
			let totalDays = new Date(selectedYear, selectedMonth, 0).getDate();
			for (let i = 1; i <= totalDays; i++) {
				days.push(i);
			}
			if(this.value[2] > totalDays - 1){
				this.$set(this.value, 2, totalDays - 1);
			}
			this.days = days;
		},

		initHours() {
			let hours = [];
			for (let i = 0; i <= 23; i++) {
				hours.push(i);
			}
			this.hours = hours;
		},

		initMinutes() {
			let minutes = [];
			for (let i = 0; i < 60; i++) {
				minutes.push(i);
			}
			this.minutes = minutes;
		},

		show() {
			this.currentDate = new Date();
			this.$set(this.value, 0, this.currentDate.getFullYear() - this.startYear);
			this.$set(this.value, 1, this.currentDate.getMonth());
			this.$set(this.value, 2, this.currentDate.getDate() - 1);
			this.$set(this.value, 3, this.currentDate.getHours());
			this.$set(this.value, 4, this.currentDate.getMinutes());
			this.setSelectValue(this.tabCur);
			this.$refs.popup.open();
			this.isShow = true;
		},

		hide() {
			this.$refs.popup.close();
			this.isShow = false;
		},
		_onChange(e) {
			let temp = JSON.parse(JSON.stringify(this.value));
			for(let i = 0; i < e.detail.value.length; i++){
				temp[i] = e.detail.value[i];
			}
			this.value = temp;
			this.initDays();
			this.setSelectValue(this.tabCur);
			this.changeTime();
		},
		setSelectValue(index) {
			this.nowDate[index] = [this.years[this.value[0]] || 0, this.months[this.value[1]] || 0, this.days[this.value[2]] || 0, this.hours[this.value[3]] || 0, this.minutes[this.value[4]] || 0];
		},
		changeTime: function(){
			let startTime = this.tranTime(0);
			let endTime = this.tranTime(1);
			this.startTime = startTime.timeStr;
			this.endTime = endTime.timeStr;
		},
		tranTime: function(index){
			let year = this.nowDate[index][0];
			let month = this.nowDate[index][1];
			let day = this.nowDate[index][2];
			let hour = this.nowDate[index][3];
			let minute = this.nowDate[index][4];
			let date = new Date(year,month - 1,day,hour,minute);
			const result = {
				year: formatNum(year),
				month: formatNum(month),
				day: formatNum(day),
				hour: formatNum(hour),
				minute: formatNum(minute),
				date: date,
				timeStr: ""
			};
			switch(this.dateType){
				case 4:
					result.timeStr = result.year;
				break;
				case 3:
					result.timeStr = result.year + '-' + result.month;
				break;
				case 2:
					result.timeStr = result.year + '-' + result.month + '-' + result.day;
				break;
				case 1:
					result.timeStr = result.year + '-' + result.month + '-' + result.day + ' ' + result.hour + ":00";
				break;
				case 0:
					result.timeStr = result.year + '-' + result.month + '-' + result.day + ' ' + result.hour + ':' + result.minute;
				break;
			};
			return result;
		},
		_onSubmit() {
			if(this.isShowTab == false){
				let result = this.tranTime(this.tabCur);
				if(this.isCanBetterThenNow == false && result.date.getTime() > this.currentDate.getTime()){
					uni.showToast({
						title: "选择时间不能大于当前时间",
						icon: "none"
					})
					return;
				}
				this.$emit('submit', result);
			}else{
				let result = [this.tranTime(0),this.tranTime(1)];
				if(result[0].date.getTime() > result[1].date.getTime() - this.delayTime * 1000){
					uni.showToast({
						title: this.timeErrorTip,
						icon: "none"
					})
					return;
				}
				this.$emit('submit', result);
			}
			this.hide();
		}
	}
};
</script>

<style lang="scss">
</style>
